<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;/* 为表格设置合并边框模型 */
				width: 500px;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td{
				border: 1px solid lightgreen;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1>后台管理系统</h1>
			<div class="entry">
				<div>
					姓名:<input type="text" id="user" value="xz"/>
					年龄:<input type="number" id="age" value=18 />
				</div>
				<div id="sex">
					性别:<label>
						男<input type="radio" name="sex" value="0" checked />
					</label>
					<label>
						女<input type="radio" name="sex" value="1" />
					</label>
				</div>
				<div>
					<div id="hobby">
						爱好:
						<label>
							电影<input type="checkbox" value="h1"  />
						</label>
						<label>
							唱歌<input type="checkbox" value="h2"  />
						</label>
						<label>
							游泳<input type="checkbox" value="h3"  />
						</label>
						<label>
							学习<input type="checkbox" value="h4"  />
						</label>
						<label>
							健身<input type="checkbox" value="h5"  />
						</label>
					</div>
					<div>
						<label>
							全选/全不选<input type="checkbox" id="checkAll" />
						</label>
						<button type="button" id="notCheck">反选</button>
					</div>
					<div>
						教育程度
						<select id="edu">
							<option value="e1">小学</option>
							<option value="e2">中学</option>
							<option value="e3">高中</option>
							<option value="e4">大学</option>
							<option value="e5">硕士</option>
						</select>
					</div>
					<div>
						<button type="button" id="add">添加</button>
						<button type="button" id="updf">确认修改</button>
						<br />
						<button type="button" id="oddColor">开启隔行变色</button>
						<button type="button" id="enterColor">开启移入变色</button>
						<br />
						<button type="button" id="ageSort">按年龄升序</button>
						<br />
						<button type="button" id="clearAll">全部清除</button>						
					</div>
					<div>
						查找姓名:<input type="text" id="search"  placeholder="仅能按姓名搜索"/>
						<button type="button" id="searchBtn">搜索</button>
					</div>
					<div id="prompt"></div>
				</div>
			</div>
			<br />
			<table id="show" >
				<thead id="trth">
					<tr>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>爱好</th>
						<th>教育程度</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>
		</div>
		<script>
			var arr=[];
			function add(){
				var userIpts=document.querySelectorAll("div#user>label input");
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				var educationSleect=document.querySelector("#education>select")
				if(user&&age){
					var sex=getUserSex();
					console.log("sex:",sex);
					var hobby=getUserHobyy();
					var education=educationSleect.value;
					var obj={
						id:+new Date(),
						user:user,
						age:age,
						sex:sex,
						hobby:hobby,
						education:education
					}
					
					arr.push(obj);
					console.log("最新数据:",arr);
					
				}else{
					alert("用户名和年龄不能为空");
				}
			}
			// 获取姓名和年龄
			function getUserSex(){
				var sexIpts=document.querySelectorAll("div#sex>label input");
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			// 获取爱好
			function getUserHobyy(){
				var hobbyIpts=document.querySelectorAll("div#hobby>label input");
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			// 全选或者全不选
			var checkAll=document.getElementById("checkAll");
			checkAll.onclick=function(){
				var f=this.checked;
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked=f;
				}
			}
			//反选
			var notCheck=document.getElementById("notCheck");
			notCheck.onclick=function(){
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked= !ipts[i].checked;
				}
				fn1();
			}
			//是否需要选中或者全选
			var ipts=document.querySelectorAll("div#hobby>label>input");
			for(var i=0;i<ipts.length;i++){
				ipts[i].onclick=function(){
					fn1();
				}
			}
			function fn1(){
				var f=true;
				for(var a=0;a<ipts.length;a++){
					if(!ipts[a].checked){
						f=false;
						break;
					}
				}
				checkAll.checked=f;
			}
			// 渲染页面
			function showPage(arr){
				var tbody=document.getElementById("tbody");
				tbody.innerHTML="";
				var trs="";
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${i}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex=="0"?"小哥哥":"小姐姐"}</td>
							<td>${setEducation(arr[i].education)}</td>
							<td>${setHobby(arr[i].hobby)}</td>
							<td>
								<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
								<a onclick=del(${arr[i].id})>删除</a>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML=trs;
			}
			function upd(obj){
				console.log("你要修改的数据:",obj);
			}
			function del(id){
				console.log("你要删除的id:",id);
			}
			function setEducation(attr){
				var obj={
					e1:"小学",
					e2:"中学",
					e3:"高中",
					e4:"大学",
				}
				console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
				return obj[attr];
			}
			//返回爱好
			function setHobby(arr){
				console.log("arr:",arr);
				var obj={
					h1:"学习",
					h2:"健身",
					h3:"游泳",
					h4:"工作",
					h5:"看电影",
				}
				var str="";
				for(var i=0;i<arr.length;i++){
					if(i==arr.length-1){
						str+=obj[arr[i]];
					}else{
						str+=obj[arr[i]]+","
					}
				}
				console.log("str:",str)
				return str;
			}
			var tempId; //用来记录修改的那条数据的id
			var arrStr;
			var arr=[];//用来存放从渲染 页面获取到的数据
			
			;(function() {
				//通过document.getElementById的方法获取到dom对象
				var prompt = document.getElementById("prompt");
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']")
				
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				
				var edu = document.getElementById("edu");
			
				var add = document.getElementById("add");
				var updf = document.getElementById("updf");
			
				console.log("localStorage.arrStr:", localStorage.arrStr, typeof localStorage.arrStr);
				
				if(localStorage.arrStr&&localStorage.arrStr!="null") {
					console.log("1111111111111111");
					arrStr = localStorage.arrStr;
					arr = JSON.parse(arrStr);
					console.log("666arr:",arr);
				} else {
					console.log("222222");
					arr = [];
					console.log("8777arr:",arr);
				}
				console.log("8888arr:",arr);
				showPage(arr);
			}());
			//修改数据:点击updf（确认修改）按钮时启动事件
			updf.onclick = function() {
				var userName = user.value.trim();
				var ageV = age.value.trim();
				if(userName && ageV) {
					var obj = {
						id: tempId,
						user: userName,
						age: ageV,
						sex: getSex(),
						hobby: getHobby(),
						edu: edu.value
					}
					var arrStr = localStorage.arrStr;
					var arr = JSON.parse(arrStr);
					for(var i = 0; i < arr.length; i++) {
						if(arr[i].id == tempId) {
							//splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,
							//并以数组形式返回被修改的内容。
							arr.splice(i, 1, obj);
						}
					}
					var arrStr = JSON.stringify(arr);
					localStorage.arrStr = arrStr;
			
					showPage(arr);
					clearValue();
			
					//切换按钮
					var add = document.getElementById("add");
					var updf = document.getElementById("updf");
			
					add.style.display = "inline-block";
					updf.style.display = "none";
				} else {
					prompt.innerHTML = "数据有误,请检查!";
				}
			}
			//开启隔行变色,通过document.getElementById先获取到dom对象
			var oddColor = document.getElementById("oddColor");
			var tab = document.getElementById("tab");
			//添加点击事件
			oddColor.onclick = function() {
				if(this.innerHTML == "开启隔行变色") {
					this.innerHTML = "关闭隔行变色"
				} else {
					this.innerHTML = "开启隔行变色"
				}
				tab.classList.toggle("tog");
			}
			
			//开启移入变色
			/*
			onmouseeneter与onmouseleave  不支持冒泡
			onmouseover与onmouseout  支持冒泡
			*/
			
			var enterColor = document.getElementById("enterColor");
			enterColor.onclick = function() {
				if(this.innerHTML == "开启移入变色") {
					this.innerHTML = "关闭移入变色";
					var oldColor;
					tab.onmouseover = function(ev) {
						var ev = ev || window.event;
						var target = ev.target || ev.srcElement;
						if(target.nodeName.toLowerCase() == "td") {
							var tr = target.parentNode;
						} else if(target.nodeName.toLowerCase() == "a") {
							var tr = target.parentNode.parentNode;
						}
						tr.style.backgroundColor = "green";
					}
					tab.onmouseout = function(ev) {
						var ev = ev || window.event;
						var target = ev.target || ev.srcElement;
						if(target.nodeName.toLowerCase() == "td") {
							var tr = target.parentNode;
						} else if(target.nodeName.toLowerCase() == "a") {
							var tr = target.parentNode.parentNode;
						}
						tr.style.backgroundColor = "";
					}
				} else {
					this.innerHTML = "开启移入变色";
					tab.onmouseover = null; //清除tab上的mouseover事件
					tab.onmouseout = null; //清除tab上的mouseout事件
				}
			}
			//按年龄升序排
			var ageSort = document.getElementById("ageSort");
			ageSort.onclick = function() {
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				arr.sort(function(a, b) {
					return a.age - b.age
				});
				showPage(arr);
			}
			//按姓名查找
			var search = document.getElementById("search");
			var searchBtn = document.getElementById("searchBtn");
			searchBtn.onclick = function() {
				var searchV = search.value;
				console.log("searchV:", searchV);
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				if(searchV != "") {
					prompt.innerHTML = "";
					var arrNew = [];
					for(var i = 0; i < arr.length; i++) {
						console.log("arr[i]:", arr[i].user);
						if(arr[i].user.indexOf(searchV) != -1) {
							arrNew.push(arr[i]);
						}
					}
					if(arrNew.length == 0) {
						prompt.innerHTML = "没有您要找的数据!";
					} else {
						showPage(arrNew);
					}
			
				} else {
					showPage(arr);
				}
			}
			//全部清除
			var clearAll = document.getElementById("clearAll");
			clearAll.onclick = function() {
				localStorage.arrStr = null;
				showPage([]);
			}
			
			add.onclick = function() {
				console.log("0000000000000000", arr);
				var userName = user.value.trim();
				var ageV = age.value.trim();
				prompt.innerHTML = "";
				if(userName && ageV) {
					var obj = {
						id: getId(),
						user: userName,
						age: ageV,
						sex: getSex(),
						hobby: getHobby(),
						edu: edu.value
					}
					if(localStorage.arrStr && localStorage.arrStr != "null") {
						arrStr = localStorage.arrStr;
						arr = JSON.parse(arrStr);
					}
					console.log("99arr:", arr);
					arr.unshift(obj);
					var arrStr = JSON.stringify(arr);
					localStorage.arrStr = arrStr;
					showPage(arr);
					clearValue();
				} else {
					prompt.innerHTML = "数据有误,请检查!";
				}
			}
			function getStyle(obj, name) {
				if(obj.currentStyle) {
					return obj.currentStyle[name];
				} else {
					return getComputedStyle(obj, null)[name];
				}
			}
			//清空输入部分
			function clearValue() {
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']");
				var edu = document.getElementById("edu");
				user.value = age.value = edu.vlaue = "";
				sexIpts[0].checked = true;
				allCheck(false);
			}
			function allCheck(f) {
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				for(var i = 0; i < hobIpts.length; i++) {
					hobIpts[i].checked = f;
				}
			}
			//渲染页面
			function showPage(arr) {
				arr ? arr : arr = [];
				console.log("渲染页面拿到arr:", arr);
				var len = arr.length;
				var trth = document.querySelector("thead#trth");
				var tab = document.getElementById("tab");
				if(len == 0) {
					tab.innerHTML = "";
					trth.style.display = "none";
				} else {
					trth.style.display = "table-header-group";
					var trtd = "";
					for(var i = 0; i < arr.length; i++) {
						trtd += `
							<tr>
								<td>${arr[i].user}</td>
								<td>${arr[i].age}</td>
								<td>${arr[i].sex=="0"?"先生":"女士"}</td>
								<td>${setHobby(arr[i].hobby)}</td>
								<td>${setEdu(arr[i].edu)}</td>
								<td>
									<a onclick=upd(${JSON.stringify(arr[i])})>修改</a>
									<a onclick=del(${arr[i].id})>删除</a>
								</td>
							</tr>
						`;
					}
					tab.innerHTML = trtd;
				}
			}
			//修改数据
			function upd(obj) {
				var user = document.getElementById("user");
				var age = document.getElementById("age");
				var edu = document.getElementById("edu");
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']");
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				user.value = obj.user;
				age.value = obj.age;
				edu.value = obj.edu;
				//选中性别
				if(obj.sex == "0") {
					sexIpts[0].checked = true;
				} else {
					sexIpts[1].checked = true;
				}
				//选中爱好
				for(var i = 0; i < hobIpts.length; i++) {
					hobIpts[i].checked = false;
					for(var j = 0; j < obj.hobby.length; j++) {
						if(hobIpts[i].value == obj.hobby[j]) {
							hobIpts[i].checked = true;
						}
					}
				}
				//切换按钮
				var add = document.getElementById("add");
				var updf = document.getElementById("updf");
				add.style.display = "none";
				updf.style.display = "inline-block";
				//记录修改的那条数据的id
				tempId = obj.id;
			
			}
			//根据id,删除数据
			function del(id) {
				var arrStr = localStorage.arrStr;
				var arr = JSON.parse(arrStr);
				for(var i = 0; i < arr.length; i++) {
					if(arr[i].id == id) {
						arr.splice(i, 1);
					}
				}
				var arrStr = JSON.stringify(arr);
				localStorage.arrStr = arrStr;
				showPage(arr);
			}
			//设置爱好
			function setHobby(arr) {
				var hobbyObj = {
					h1: "电影",
					h2: "唱歌",
					h3: "游泳",
					h4: "学习",
					h5: "健身"
				}
				var strHobby = "";
				for(var i = 0; i < arr.length; i++) {
					strHobby += hobbyObj[arr[i]] + " ";
				}
				return strHobby;
			}
			
			//设置学历
			function setEdu(str) {
				var eduObj = {
					e1: "小学",
					e2: "中学",
					e3: "高中",
					e4: "大学",
					e5: "硕士"
				}
				return eduObj[str]
			}
			//获取爱好
			function getHobby() {
				var hobIpts = document.querySelectorAll("div#hobby input[type='checkbox']");
				var arr = [];
				for(var i = 0; i < hobIpts.length; i++) {
					if(hobIpts[i].checked) {
						arr.push(hobIpts[i].value);
					}
				}
				return arr;
			}
			//获取性别
			function getSex() {
				var sexIpts = document.querySelectorAll("div#sex input[type='radio']")
				if(sexIpts[0].checked) {
					return sexIpts[0].value;
				} else {
					return sexIpts[1].value;
				}
			}
			//返回一个时间戳
			function getId() {
				return new Date().getTime() + "";
			}
		</script>
	</body>
</html>
